<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link rel="stylesheet" href="../static/css/common/reset.min.css" />
		<link rel="stylesheet" href="../static/css/common/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/order/order_detail.css?v=2018" />
		<title>订单详情</title>
	</head>

	<body>
		<div class="body">
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="header" v-show="partDetail" style="display: none;">
						<div class="display">
							<p class="display">
								<span>本次还款金额(元)</span>
								<span v-text="partDetail.shouldRepay" class="partDetail_mone"></span>
							</p>
							<p v-text="'本金'+partDetail.borrowMoney+'+手续费'+partDetail.interestFee+'+逾期费'+partDetail.overdueFee"></p>
						</div>
						<div class="display" v-show="partDetail.shouldRepay!=sumDetail.shouldRepay">
							<p class="display">
								<span>剩余还款总额(元)</span>
								<span v-text="sumDetail.shouldRepay" class="sumDetail_mone"></span>
							</p>
							<p v-text="'本金'+sumDetail.borrowMoney+'+手续费'+sumDetail.interestFee+'+逾期费'+sumDetail.overdueFee"></p>
						</div>
					</div>
					<div class="content">
						<ul class="ul">
							<li>
								<span>借款金额</span>
								<span v-text="borrowMoney+'元'"></span>
							</li>
							<li>
								<span>借款日期</span>
								<span v-text="createTime"></span>
							</li>
							<li>
								<span>资金用途</span>
								<span v-text="arr[purpose-1]"></span>
							</li>
							<li>
								<span>借款方式</span>
								<span>等额本息</span>
							</li>
							<li>
								<span>还款计划</span>
								<span v-text="borrowPeriod+'期('+productDay+'天)'"></span>
							</li>
							<li>
								<span>借款协议</span>
								<span class="look" @tap="look()">查看</span>
							</li>
						</ul>
						<div class="success" v-show="repaymentDTOList" style="display: none;">
							<div class="title display">
								<p>还款计划</p>
								<img src="../static/img/ic_problem.png" @tap="issue_show()" />
							</div>
							<div class="main">
								<div class="main_boay display" v-for="(item,index) in repaymentDTOList">
									<div class="main_div1">
										<p v-text="item.strRepayTime"></p>
										<span v-text="'('+item.currentPeriod+'/'+borrowPeriod+'期)'"></span>
									</div>
									<div class="main_div2">
										<div class="div_flex display">
											<span class="radius"></span>
											<p v-text="item.shouldRepay"></p>
											<span :class="{red:item.statusDesc=='逾期待还',yellow:item.statusDesc=='本期待还'}" v-text="item.statusDesc"></span>
										</div>
										<p v-text="'本金'+item.borrowMoney+'+手续费'+item.interestFee+'+逾期费'+item.overdueFee"></p>
									</div>
								</div>
							</div>
							<div class="detail" v-show="partDetail" style="display: none;">
								<button @tap="enter(0)" v-show="partDetail.nowPeriods>0">确认本次还款</button>
								<button @tap="enter(1)" v-show="sumDetail.nowPeriods>partDetail.nowPeriods">提前全部还清</button>
							</div>
						</div>
						<div class="state" v-show="loanBeforeList" style="display: none;">
							<div class="title">申请进度</div>
							<div class="div_bottom">
								<li v-for="item in loanBeforeList">
									<div class="div_flex">
										<span></span>
										<p v-text="item.event"></p>
										<p v-text="item.eventTime"></p>
									</div>
									<p v-text="item.eventDescribe"></p>
								</li>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--还款详情问题-->
			<div class="issue" @tap="issue_hide()" style="display: none;">
				<div class="is_div">
					<div class="mm">
						<p>1.利息按日计算，日费率为<span v-text="dayRate"></span>%,逾期费率<span v-text="overdueRate"></span>%</p>
						<p>2.每期还款金额=(贷款本金*每期利率*(1+每期利率)^还款期数)/((1+每期利率)^还款期数-1)</p>
						<p>3.当期逾期费用=当期应还本息*<span v-text="overdueRate"></span>%*逾期天数</p>
						<p>实际以借款相关协议为准</p>
						<div>知道了</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../static/js/common.js?v=3"></script>
	<script src="../static/js/bridge.js"></script>
	<script src="../static/js/common/jquery.min.js"></script>
	<script src="../static/js/common/vue.min.js"></script>
	<script src="../static/js/common/mui.min.js"></script>

	<script>
		$(function() {
			var domain = apiDomain();
			var webUrl = webDomain();
			var token = getToken();
			var orderId = GetQueryString("orderId");

			var vx = new Vue({
				el: ".body",
				data: function() {
					return {
						arr: ["个人消费", "旅游", "医疗", "教育", "装修"],
						createTime: "",
						borrowMoney: "",
						borrowPeriod: "",
						productDay: "",
						partDetail: "",
						sumDetail: "",
						purpose: "",
						repaymentDTOList: "",
						loanBeforeList: "",
						orderId: "",
						dayRate: "",
						overdueRate: ""
					}
				},
				mounted: function() {
					const that = this;
					this.ajax(that);
					this.refresh(that);
					$('#scroll').scroll({
						scrollY: true, //是否竖向滚动
						bounce: true, //是否启用回弹
						indicators: false
					});
				},
				methods: {
					refresh: function(that) {
						//下拉刷新
						mui.init({
							pullRefresh: {
								container: "#refreshContainer",
								down: {
									height: "60",
									contentdown: "下拉立即刷新",
									contentover: "释放立即刷新",
									contentrefresh: "正在刷新...",
									callback: function() {
										setTimeout(function() {
											mui('#refreshContainer').pullRefresh().endPulldownToRefresh(false);
											that.$options.methods.ajax(that);
										}, 500);
									}
								}
							}
						});
					},
					ajax: function(that) {
						$.ajax({
							type: "post",
							url: domain + "/order/loan_repay_detail",
							async: true,
							data: {
								token: token,
								orderId: orderId
							},
							dataType: 'json',
							success: function(res) {
								if(res.status == 2000) {
									var obj = res.data;
									if(obj.orderStatus == 3) {
										that.partDetail = obj.partDetail;
										that.sumDetail = obj.sumDetail;
									} else {
										that.partDetail = "";
										that.sumDetail = "";
									};
									if(obj.loanBeforeList) {
										that.loanBeforeList = obj.loanBeforeList;
									} else {
										that.loanBeforeList = "";
									};
									that.orderId = obj.orderId;
									that.purpose = obj.purpose;
									that.borrowMoney = obj.borrowMoney;
									that.createTime = obj.createTime;
									that.borrowPeriod = obj.borrowPeriod;
									that.productDay = obj.productDay;
									that.repaymentDTOList = obj.repaymentDTOList;
									that.dayRate = obj.dayRate;
									that.overdueRate = obj.overdueRate;
								} else {
									mui.alert(res.message);
								}
							}
						});
					},
					enter: function(preclear) {
						var that = this;
						var money = $(".partDetail_mone").html();
						if(preclear == 1) {
							money = $(".sumDetail_mone").html();
						};
						skipPage(0, webUrl + "order/select_by.html?orderId=" + this.orderId + "&repayMoney=" + money + "&preclear=" + preclear);
						mui.confirm('还款成功了吗？', '提示', ["是", "否"], function(e) {
							that.$options.methods.ajax(that);
						});
					},
					look: function() {
						skipPage(0, webUrl + "agreement/protocol.html?orderId=" + this.orderId);
					},
					issue_show: function() {
						$(".issue").show();
					},
					issue_hide: function() {
						$(".issue").hide();
					}
				}
			})
		})
	</script>

</html>